<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-button
        type="primary"
        plain
        size="middle"
        style="float: right; margin-bottom: 10px"
        @click="addMenu"
        :disabled="!checkPermission('permission:menu:create')"
      >创建菜单</el-button>
      <!-- 表格 -->
      <el-table :data="list" border="" row-key="id">
        <el-table-column label="菜单名称" prop="permission_name" align="center" />
        <el-table-column label="菜单地址" prop="route" align="center" />
        <el-table-column label="权限标识" prop="permission_mark" align="center" />
        <el-table-column label="图标" prop="icon" align="center">
          <template slot-scope="{ row }">
            <svg-icon :icon-class="row.icon" />
          </template>
        </el-table-column>
        <el-table-column label="组件路径" prop="component" align="center" />
        <el-table-column label="是否显示" prop="hidden" align="center">
          <template slot-scope="{ row }">
            <el-switch
              v-model="row.hidden"
              :active-value="1"
              :inactive-value="2"
              @change="switchfn(row.id,row.hidden)"
            />
            <!-- {{ row.hidden }} -->
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="created_at" align="center" />
        <el-table-column label="操作" align="center">
          <template slot-scope="{ row }">
            <el-button type="text" @click="editMenu(row)" :disabled="!checkPermission('permission:menu:update')">
              <el-button type="primary" icon="el-icon-edit" circle />
            </el-button>
            <el-button
              type="text"
              :disabled="!checkPermission('permission:menu:create')"
              @click="addMenuBtn(row)"
            >
              <el-button type="warning" icon="el-icon-plus" circle />
            </el-button>
            <el-button type="text" @click="delMenu(row.id)" :disabled="!checkPermission('permission:menu:delete')">
              <el-button type="danger" icon="el-icon-delete" circle />
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <add-menu ref="addMenu" :list="list" />
  </div>
</template>

<script>
import { getMenuList, deleteMenuList, switchmenu } from '@/api/permission'
import addMenu from '../components/addMenu.vue'
export default {
  name: 'MenuList',
  components: { addMenu },
  data() {
    return {
      list: []
    }
  },
  created() {
    this.getMenuList()
  },
  methods: {
    async switchfn(id, status) {
      // console.log(id, status)
      await switchmenu({ id: id, status: status })
      this.getMenuList()
      this.$message.success('切换成功')
      // console.log(res)
    },
    async getMenuList() {
      const { data } = await getMenuList()
      console.log(data)
      this.list = data
    },
    addMenu() {
      this.$refs.addMenu.isShowDialog = true
      this.$refs.addMenu.formData = {
        permission_name: '',
        route: '',
        component: '',
        permission_mark: '',
        redirect: '',
        hidden: 1, // 1是显示，2是不显示
        keepalive: null, // 1=>是，2=>否
        islink: 2, // 1是外链，2是不外链
        sort: 10,
        icon: '',
        type: 1,
        parent_id: 0
      }
    },
    editMenu(row) {
      this.$refs.addMenu.isShowDialog = true
      this.$refs.addMenu.formData = row
      if (row.type === 2) {
        this.$refs.addMenu.menuQ = false
        this.$refs.addMenu.checkBtn = false
      } else if (row.type === 1) {
        this.$refs.addMenu.menuQ = true
      }
    },
    async delMenu(id) {
      try {
        await this.$confirm('确认删除？')
        await deleteMenuList(id)
        this.getMenuList()
      } catch (error) {
        console.log(error)
      }
    },
    addMenuBtn(row) {
      console.log(row)
      this.$refs.addMenu.isShowDialog = true
      this.$refs.addMenu.checkBtn = true
      this.$refs.addMenu.formData.parent_id = row.id
    }
  }
}
</script>

<style></style>
